<script setup lang='ts' name="sales-order">
import { ref } from 'vue'

import OrderList from './component/order-list.vue'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: 'sales-order-index',
})

const tabs = ['订单列表']

const active = ref(0)
const queryType = ref('1')

function change(val: any) {
    queryType.value = val === 0 ? '1' : '0'
}
</script>

<template>
    <el-tabs v-model="active"
             class="order-tabs"
             type="border-card"
             @tab-change="change"
    >
        <el-tab-pane v-for="(item, index) in tabs"
                     :key="index"
                     :name="index"
                     :label="item"
        />
    </el-tabs>

    <OrderList v-if="active === 0"
               :query-type="queryType"
    />
</template>

<style lang="less" scoped>
.order-tabs {
    border-bottom-color: transparent;
    box-shadow: var(--el-box-shadow-light);
}
</style>
